<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>主页</title>
    <!-- layUI的核心CSS文件 -->
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/layui-v2.5.7/layui/css/layui.css"/>
    <!-- layUI的核心JS文件 -->
    <script src="${pageContext.request.contextPath}/static/layui-v2.5.7/layui/layui.js" type="text/javascript"
            charset="UTF-8"></script>
</head>
<body>

<form class="layui-form" >
    <div class="layui-layout layui-layout-admin">

        <div class="layui-header">

            <div class="layui-logo"><a style="color: #009688;">龙洞闲置购物系统</a></div>

            <!-- 头部区域（可配合layui已有的水平导航） -->

            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item">
                    <a href="ShowALLGoods">首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">商品分类</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">书籍类</a></dd>
                        <dd><a href="">鞋类</a></dd>
                        <dd><a href="">首饰类</a></dd>
                        <dd><a href="">箱包类</a></dd>
                        <dd><a href="">美妆类</a></dd>
                        <dd><a href="">数码类</a></dd>
                        <dd><a href="">电脑办公类</a></dd>
                        <dd><a href="">食品类</a></dd>
                        <dd><a href="">运动类</a></dd>
                        <dd><a href="">玩具娱乐类</a></dd>
                        <dd><a href="">个护清洁类</a></dd>
                        <dd><a href="">日用百货类</a></dd>
                        <dd><a href="">电器类</a></dd>
                        <dd><a href="">会员卡类</a></dd>
                    </dl>
                </li>

                <form class="layui-form" action="" method="post">
                    <div class="layui-input-inline" style="width: 400px;">
                        <input type="text" name="" required lay-verify="required" placeholder="请输入关键字"
                               autocomplete="off" class="layui-input"
                               style="margin-left: 200px">
                    </div>
                    <button class="layui-btn" lay-submit lay-filter="search" style="margin-left: 200px">搜索</button>

                </form>
                <script type="text/javascript">
                    layui.use('form', function () {
                        var form = layui.form;
                        form.on('submit(search)', function (data) {
                            console.log(data);
                            return false;
                        });
                    });
                </script>
            </ul>
</form>
<ul class="layui-nav layui-layout-right">
    <!-- 判断是商品页面还是需求页面 true/false -->
    <input type="checkbox" name="goodsorneeds" lay-skin="switch" lay-text="商品|需求">


    <!-- 如果未登录 -->
    <c:if test="${empty sessionScope.user}">
        <li class="layui-nav-item">
            <a href="tologin">你好，请登录</a>
        </li>
    </c:if>

    <!-- 如果已登录 -->
<c:if test="${not empty sessionScope.user}">
    <li class="layui-nav-item">
        <!-- 用户头像 -->
        <a href="javascript:;">
            <img src="${pageContext.request.contextPath}/static/images/default_head.jpg" class="layui-nav-img">
                ${sessionScope.user.uname}
        </a>
        <dl class="layui-nav-child">
            <dd><a href="getUserInfo?uid=${user.uid}">修改信息</a></dd>
            <dd><a href="toUserSafe?uid=${user.uid}">安全设置</a></dd>
            <dd><a href="gotologinone">切换账号</a></dd>
            <dd><a href="checkMyOrder?obid=${user.uid}">我的订单</a></dd>
            <dd><a href="gotogoodsadd">发布商品</a></dd>
            <dd><a href="gotouserpub">我的发布</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="tologout">退出登录</a></li>
</c:if>
</ul>
</div>


<!-- 内容主体区域 -->


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px">
    <!-- 种类名称 -->
    <legend style="margin-left: 50px;">所有商品</legend>
</fieldset>


        <c:forEach var="good" items="${Goodslist}">
            <div class="layui-col-md3" style="margin-top: 50px; border: 1px solid black;">
                <div class="layui-card">
                    <div class="layui-card-body" style="height: 260px;">
                        <a href="gotoGoodsDet">
                            <img src="${pageContext.request.contextPath}/static/images/1.jpg" style="width: 100%;height: 100%;">
                        </a>
                    </div>
                    <!-- 商品名 -->
                    <a href="gotoGoodsDet" >
                        <div class="layui-card-header">
                             商品名称：   ${good.gname}
                        </div>
                    </a>
                    <div class="layui-card-header">
                          商品价格：  ${good.gprice}
                    </div>
                </div>
            </div>
        </c:forEach>


    </div>


</div>
<script type="text/javascript">
    var count = 8;
    var items = document.getElementById("items");
    window.onscroll = function () {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        //滚动条到底部的条件
        if (scrollTop + windowHeight == scrollHeight) {
            for (var i = 0; i < 4; i++) {
                items.innerHTML += "<div class='layui-col-md3' style='margin-top: 50px; border: 1px solid black;'>" +
                    "<div class='layui-card'>" +
                    "<div class='layui-card-body' style='height: 260px;'>" +
                    "<img src='${pageContext.request.contextPath}/static/images/1.jpg' style='width: 100%;height: 100%;'>" +
                    "</div>" +
                    "<div class='layui-card-header'>商品名</div>" +
                    "</div>" +
                    "</div>"
                count++;
                console.log(count);
            }
        }
    }
</script>

<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
</script>
</body>
</html>
